<?php

extract($data);
?>
<style type="text/css">
    body{padding: 0px;margin: 0px;}
    *{font-family:verdana;font-size:8.5pt;}
    .banner-wrapper{
        width: <?= $width?>px;
        height: <?= $height?>px;
        padding: 0px;
        margin: 0px;
        position: relative;
        
        /*overflow:hidden;*/
        
        
        
        margin-left:200px;
        
    }
    .b1{border: solid red 3px;}
    .b2{border: solid blue 1px;}
    .label-title{
        top:0px;
        right:5px;
        position:absolute;
        padding:2px 5px 2px 5px;
        color:#FFFFFF;
        border-right:solid grey 2px;
        border-bottom:solid grey 2px;
        border-left:solid grey 2px;
        background-color:black;
        z-index:10;
    }
    .label-title a{color:#FFFFFF; text-decoration:none;}
    .curb{
        border: 1px solid grey;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        position: relative;
        behavior: url('pie/PIE.php');
    }
    .inner{width: <?= $width?>px; height: <?= $height?>px; overflow:hidden;}
    .show-50 { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }
    .nav{
        display:block;
        float: right;
        margin-right: 5px;
        margin-top: 4px;
        padding: 2px 3px 2px 3px;
        color: white;
        text-decoration:none;
        border: 1px solid grey;
        border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        -o-border-radius: 12px;
        position: relative;
        behavior: url('pie/PIE.php'); 
    }
    .active{ background-color:white; color:black; }
    .nav-wrapper{
        position: absolute;
        top: 80%;
        left: 0px;
        height: 30px;
        width:100%;
        border-top: solid grey 1px;
        border-bottom: solid grey 1px;
        background-color:black;
        -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;
    }
    .title{float:left;margin-top:6px; margin-left:5px;color:white;}
</style>

<script type="text/javascript" src="<?= BASE_URL?>imports/js/jquery-1.6.4.min.js"></script>

<?php 
$ids = explode(',', $content);
$ctr = count($ids);
?>
<div style="height:900px;padding-top: 150px;text-align: center;">
    
   <div class="banner-wrapper b1" effect="<?= $effect?>">
        <?php foreach ($ids as $v): ?>

        <div index="<?= $v?>">
            <?php 
            $ar = explode('_', $v);
            $type = $ar[0];
            $id = $ar[1];
            ?>
            <?php if($type=='page'):?>
                <?= $attr[$type][$id]['content'] ?>
            <?php else:?>
                <img src="<?= BASE_URL.$attr[$type][$id]['location'] ?>" />
            <?php endif;?>

        </div>
        <?php endforeach; ?>
        <span style="z-index: 100;" class="nav-wrapper">

            <?php $i=1;?>
            <?php foreach($ids as $v): ?>
                <?php 
                $ar = explode('_', $v);
                $type = $ar[0];
                $id = $ar[1];
                ?>
                <?= ($i==1)?'<span class="title">'.$attr[$type][$id]['title'].'</span>':''?>
                <a href="#" index="<?= $v ?>" class="nav <?= ($i==1)?'active':'' ?>"><?= $i++ ?></a>
            <?php endforeach; ?>
        </span>
    </div>
    
    
</div>

<script>
var array = new Array();  
var attr = <?= json_encode($attr)?>;
var effect = '';
var speed1 = 2000;
var speed2 = 3000;
var loop = 1;
var interval = 1;
var z_index = <?= $ctr ?>;
$(function(){
    
    $(".banner-wrapper").ready(function(){
        effect = $(".banner-wrapper").attr('effect');
        var width = <?= $width?>;
        var height = <?= $height?>;
        
        var last = 0;
        var i = 0;
        
        switch(effect){
            case 'slide':
                $('div', ".banner-wrapper").each(function(){
                    $(this).css('position','absolute');
                    last = i*width;
                    $(this).css('left',last+'px').show();
                    i++;
                });
                animate_slide(last,width);
                break;
            default:
                $('div', ".banner-wrapper").each(function(){
                    $(this).css('position','absolute');
                    $(this).css('z-index',z_index--);
                    var x = $(this).attr('index');
                    array.push(x)
                    last = i*40;
                    i++;
                });
                
                setTimeout('animate_fade()',2000)
                break;
        }
        
        $(".nav").click(function(){
            var index = $(this).attr('index');
            var my_left = parseInt($('div[index="'+index+'"]').css('left'));
            var times = my_left / width;
            //alert(times);
            loop = 0;
            interval = times;
           
            
        });
        
    });
});

function animate_fade(){
   $('div[index="'+array[0]+'"]').fadeOut(speed1, function(){
       cool_change(array[1]);
       swap();
   });
}

function cool_change(index){
    $(".nav").removeClass('active');
    $('a[index="'+index+'"]').addClass('active');
    var arr = index.split('_');
    
    if(arr[0]=='image'){
        var title = attr.image[arr[1]].title;
        $(".title").html(title);
    }
}

function swap(){
    var size = parseInt(array.length);
    var temp = array[0];
    var x = 0;
    for(var i = 0; i < size; i++){
        x = array[i+1];
        array[i] = x;
    }

    array[size-1] = temp;
    var ctr = size;
    $.each(array,function(i, v){
        $('div[index="'+v+'"]').css('z-index',ctr).show();
        ctr--;
    });
    
    setTimeout('animate_fade()',speed2);
}

function animate_slide(last,width){
    $('div', ".banner-wrapper").each(function(){
        
        var left = $(this).css('left');
        left = parseInt(left);
        
        $(this).delay(speed2).animate({left:'-='+(width*interval)+'px'}, speed1,function(){
            left = parseInt($(this).css('left'));
            
            if(left==0){
                var index = $(this).attr('index');
                cool_change(index);
            }
            
            if(left<0){
                $(this).css('left','+='+(width*z_index)+'px');
            }
            if(loop==1 && left == ((last-width)-(width*interval))){
                interval = 1;
                animate_slide(last,width,1);
            }
        });
    });
}
</script>

